<template>
  <div class="card-common-inner public-line-monitor">
    <first-level-title title="实时监控">
      <div slot="other" class="other-text">更新时间：{{ time || '' }}；单位：户</div>
    </first-level-title>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else class="monitor-kpi">
      <div class="kpi-item" v-for="item in list" :key="item.title">
        <div class="kpi-total">
          <div class="title">{{ item.title }}</div>
          <div class="value-nolink">{{ item.value }}</div>
          <!-- <div v-if="item.value == 0" class="value-nolink">{{ item.value }}</div>
          <div v-else class="value" @click="viewDetials(item.type)">{{ item.value }}</div> -->
        </div>
        <div class="kpi-info">
          <div class="info-item" v-for="child in item.child" :key="child.title">
            <span class="sub-title">{{ child.title }}</span>
            <span class="sub-value">{{ child.value }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firstLevelTitle from '@/components/common/firstLevelTitle.vue'
import { realTime, realMonitor,realMonitorZyxrds } from '@/api/publicline/index.js'


export default {
  components: { firstLevelTitle },
  data() {
    return {
      isLoading: true,
      time: '',
      list: [
        { 
            title: '移网发展', value: 0, type: 'yw',
            child: [
              { title: '5G新增', value: 0 },
              { title: '5G迁转', value: 0 },
              { title: '5G升级包', value: 0 },
              // { title: '冰淇淋', value: 0 },
              // { title: '百元折算', value: 0 }
            ]
          },
          { 
            title: '固网发展', value: 0, type: 'gw',
            child: [
              { title: '宽带', value: 0 },
              { title: '千兆', value: 0 },
              { title: '融合发展', value: 0 },
              { title: '提速包', value: 0 }
            ]
          },
          { 
            title: '携转指标', value: 0, type: 'xz',
            child: [
              { title: '携入用户数', value: 0 },
              { title: '携出用户数', value: 0 }
            ]
          },
          { 
            title: '智慧家庭', value: 0, type: 'zh',
            child: [
              { title: '沃家组网', value: 0},
              { title: '沃家神眼', value: 0 },
              { title: 'TV增值', value: 0 },
              { title: '沃家固话', value: 0 }
            ]
          },
          { 
            title: '装移修', value: 0, type: 'zyx',
            child: [
              { title: '装机完成', value: 0 },
              { title: '装机在途', value: 0 },
              { title: '移机完成', value: 0 },
              { title: '移机在途', value: 0 },
              { title: '修障完成', value: 0 },
              { title: '修障在途', value: 0 }
            ]
          }
      ],
    }
  },
  mounted() {
    this.getRealTime()
    this.getRealMonitor()
  },
  methods: {
    // 获取时间
    async getRealTime() {
      const res = await realTime({ })
      const { result, success } = res
      if (success) {
        this.time = result[0] || {}
      }
    },
    // 获取实时监控数据
    async getRealMonitor() {
      this.isLoading = true
      // const res = await realMonitor({ orgId: this.$isCeo ? this.$gridId : this.$dataPermission })
      const res = await realMonitor({ townNo:  this.$gridId })
      const { result, success } = res
      if (success) {
        console.log('-----', result)
        const info = result[0] || {}
        console.log('-----', info)
        this.list = [
          { 
            title: '发展', value: (info.GSM_VALUE + info.KD_VALUE + info.RH_VALUE) || 0, type: 'yw',
            child: [
              { title: '移网', value: info.GSM_VALUE || 0 },
              { title: '宽带', value: info.KD_VALUE || 0 },
              { title: '融合', value: info.RH_VALUE || 0 },
              // { title: '冰淇淋', value: info.GSM_DEV_BJL || 0 },
              // { title: '百元折算', value: info.GSM_DEV_2I || 0 }
            ]
          },
          { 
            title: '维系', value: (info.QZ_5G_VALUE + info.SJB_5G_VALUE + info.KDTSB_VALUE) || 0, type: 'yw',
            child: [
              { title: '5G迁转', value: info.QZ_5G_VALUE || 0 },
              { title: '5G升级包', value: info.SJB_5G_VALUE || 0 },
              { title: '宽带提速包', value: info.KDTSB_VALUE || 0 },
            ]
          },
          { 
            title: '交付', value: (info.JF_ZJWC_VALUE + info.JF_YJWC_VALUE + info.JF_XZWC_VALUE + info.JF_ZJZT_VALUE + info.JF_YJZT_VALUE + info.JF_XZZT_VALUE) || 0, type: 'yw',
            child: [
              { title: '装机完成', value: info.JF_ZJWC_VALUE || 0 },
              { title: '装机在途', value: info.JF_ZJZT_VALUE || 0 },
              { title: '移机完成', value: info.JF_YJWC_VALUE || 0 },
              { title: '移机在途', value: info.JF_YJZT_VALUE || 0 },
              { title: '修障完成', value: info.JF_XZWC_VALUE || 0 },
              { title: '修障在途', value: info.JF_XZZT_VALUE || 0 },
              // { title: '冰淇淋', value: info.GSM_DEV_BJL || 0 },
              // { title: '百元折算', value: info.GSM_DEV_2I || 0 }
            ]
          },
        ];
        // this.list = [
        //   { 
        //     title: '移网发展', value: info.GSM_DEV || 0, type: 'yw',
        //     child: [
        //       { title: '5G新增', value: info.GSM_DEV_5GNEW || 0 },
        //       { title: '5G迁转', value: info.GSM_DEV_5GTRAN || 0 },
        //       { title: '5G升级包', value: info.GSM_DEV_5GUP || 0 },
        //       // { title: '冰淇淋', value: info.GSM_DEV_BJL || 0 },
        //       // { title: '百元折算', value: info.GSM_DEV_2I || 0 }
        //     ]
        //   },
        //   { 
        //     title: '固网发展', value: info.LOCA_DEV || 0, type: 'gw',
        //     child: [
        //       { title: '宽带', value: info.LOCA_DEV_KD || 0 },
        //       { title: '千兆', value: info.LOCA_DEV_QZ || 0 },
        //       { title: '融合发展', value: info.COMB_DEV || 0 },
        //       { title: '提速包', value: info.LOCA_DEV_TSB || 0 }
        //     ]
        //   },
        //   { 
        //     title: '携转指标', value: info.TRAN_DEV || 0, type: 'xz',
        //     child: [
        //       { title: '携入用户数', value: info.TRAN_DEV_INPUT || 0 },
        //       { title: '携出用户数', value: info.TRAN_DEV_OUTPUT || 0}
        //     ]
        //   },
        //   { 
        //     title: '智慧家庭', value: info.ZHJT_DEV || 0, type: 'zh',
        //     child: [
        //       { title: '沃家组网', value: info.ZHJT_DEV_WJZW || 0},
        //       { title: '沃家神眼', value: info.ZHJT_DEV_WJSY || 0 },
        //       // { title: 'TV增值', value: info.ZHJT_DEV_IPTV || 0 },
        //       { title: '沃家固话', value: info.ZHJT_DEV_WJGH || 0 }
        //     ]
        //   }
        // ]
        this.isLoading = false
        this.time = info.INSERT_DATE;
      }
      return;
      const res1 = await realMonitorZyxrds({ orgId: this.$isCeo ? this.$gridId : this.$dataPermission })
      console.log(res1,'res1=======')
      const result1=res1.result;
      const success1=res1.success;
      if (success1) {
        const info1 = result1[0] || {}
        console.log(info1,'info1=======')
          const zyx= { 
            title: '装移修', value: info1.ZYX || 0, type: 'zyx',
            child: [
              { title: '装机完成', value: info1.ZJWC || 0 },
              { title: '装机在途', value: info1.ZJZT || 0 },
              { title: '移机完成', value: info1.YJWC || 0 },
              { title: '移机在途', value: info1.YJZT || 0 },
              { title: '修障完成', value: info1.XJWC || 0 },
              { title: '修障在途', value: info1.XJZT || 0 }
            ]
          }
          this.list.push(zyx)
          
        this.isLoading = false
      }
    },
    viewDetials( type ) {
      // 此处需要判断，如果是一线智家工程师或营销经理，直接跳转到个人的详情页
      // this.$open.call(this, '/publicline/monitor-detials', { type: type })
      // 如果是管理层或小CEO人员，跳转到列表页
      this.$open.call(this, '/publicline/monitor-list', { type })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/card.less';
.public-line-monitor .monitor-kpi {
  margin-top: 12px;
  .kpi-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 86px;
    background: #FFF;
    border: 1px solid rgba(235,243,255,1);
    border-radius: 4px;
    margin-bottom: 10px;
    .kpi-total {
      width: 90px;
      text-align: center;
      border-right: 1px solid rgba(245,245,245,1);
    }
    .title {
      color: #666;
    }
    .value {
      font-size: 18px;
      color: #4D98FF;
      margin-top: 4px;
      text-decoration: underline;
    }
    .value-nolink {
      font-size: 18px;
      color: #666;
      margin-top: 4px;
    }
    .kpi-info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-left: 10px;
    }
    .info-item {
      width: 50%;
      line-height: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sub-title {
      font-size: 12px;
      color: #999;
    }
    .sub-value {
      padding-right: 14px;
    }
  }
}
</style>